<template>
	<view class="container">
		<view class="example">
			<uni-forms :modelValue="formData" :rules="rules" ref="formData" labelWidth="80px">
				<uni-forms-item label="宿舍" required name="dormitoryid">
					<uni-data-picker placeholder="请选择宿舍" popup-title="请选择宿舍" :localdata="dataTree"
						v-model="formData.dormitoryid">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="时间" required name="readDate">
					<uni-datetime-picker v-model="formData.readDate" />
				</uni-forms-item>
				<uni-forms-item name="numberdegrees" label="度数" required>
					<input class="custom-input" v-model="formData.numberdegrees" type="digit" placeholder="请输入数值" />
				</uni-forms-item>
				<uni-forms-item label="照片" required name="readDate">
					<uni-icons type="camera" size="60" @click="takePhoto"></uni-icons>
					<div class="image-container">
						<div v-for="(image, index) in previewImages" :key="index" class="image-item">
							<img :src="image" alt="预览照片" class="image-preview">
							<div class="delete-container">
								<i class="delete-icon" @click="removePreview(index)"></i>
							</div>
						</div>
					</div>
				</uni-forms-item>

			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getDormitorytree
	} from '@/api/dormitory'
	import upload from '@/utils/upload'
	import {
		listhisDormitory,
		gethisDormitory,
		delhisDormitory,
		addhisDormitory,
		updatehisDormitory
	} from "@/api/hisdormitory";
	import moment from 'moment';
	import config from '@/config';

	export default {
		data() {
			return {
				formData: {
					dormitoryid: '',
					images: [],
					readDate: new Date()
				},
				dataTree: [],
				previewImages: [],
				rules: {
					dormitoryid: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					images: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					readDate: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					numberdegrees: {
						rules: [{
							required: true,
							errorMessage: '度数不能为空'
						}, {
							format: 'number',
							errorMessage: '度数只能输入数字'
						}]
					}
				}
			}
		},
		created() {
			this.GetDormitorytree()
		},
		onReady() {
			this.$refs.formData.setRules(this.rules)
		},
		methods: {
			takePhoto() {
				let that = this;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], // 允许从相机和图库选择图片
					success: function(res) {
						//console.log(res.tempFilePaths)
						//console.log(JSON.stringify(res.tempFilePaths));
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let filepath = res.tempFilePaths[i];
							that.uploadImage(filepath);
							//that.previewImages.push(filepath);
						}
						//console.log(that.previewImages);
					}
				});
			},
			uploadImage(filepath) {
				let data = {
					url: '/common/upload',
					filePath: filepath
				}
				upload(data).then(response => {
						console.log('上传成功', response)
						const baseJarUrl = config.baseJarUrl;
						this.formData.images.push({
							"fileName": response.fileName,
							"url": response.url,
						});
						this.previewImages.push(baseJarUrl + response.url);
						console.log('previewImages', this.previewImages)
					})
					.catch(error => {
						console.error('上传失败', error)
					})

			},
			removePreview(index) {
				this.previewImages.splice(index, 1);
				this.formData.images.splice(index, 1);
				console.log(this.formData.images)
			},
			GetDormitorytree() {
				getDormitorytree().then((response) => {
					this.dataTree = response;
				});
			},
			submit() {
				this.$refs.formData.validate().then(res => {
					this.$modal.confirm("数据提交后将不能修改！确认提交吗？").then(() => {
							this.formData.readDate = moment(this.formData.readDate).format('YYYY-MM-DD');
							addhisDormitory(this.formData).then(response => {
								//console.log(response)
								this.$modal.msgSuccess("保存成功")
							})
						})
						.catch(() => {
							// 用户点击了取消按钮或者关闭了对话框
							console.log('用户点击了取消或关闭了对话框');
							// 在这里执行相关操作
						});
				})
			},
			bindDateChange(e) {
				this.formData.readDate = e.target.value;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}

	.image-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.image-item {
		position: relative;
		width: 120px;
		height: 120px;
	}

	.image-preview {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.delete-container {
		position: absolute;
		top: 5px;
		right: 5px;
	}

	.delete-icon {
		width: 20px;
		height: 20px;
		background-color: #fff;
		border-radius: 50%;
		color: red;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.delete-icon::before,
	.delete-icon::after {
		content: '';
		position: absolute;
		width: 12px;
		height: 2px;
		background-color: currentColor;
	}

	.delete-icon::before {
		transform: rotate(45deg);
	}

	.delete-icon::after {
		transform: rotate(-45deg);
	}

	.custom-input {
		border: 1px solid #ccc;
		padding: 10px;
		border-radius: 5px;
		width: 100%;
		height: 35px;
	}
</style>